<template>
    <div class="example1-wrapper">
        <div class="inner">
            <bk-table
                style="margin-top:20px"
                height="530"
                :data="data"
                ref="table"
                @page-change="handlePageChange"
                @selection-change="handleSelectionChange"
                :pagination="pagination">
                <bk-table-column type="selection" width="60"></bk-table-column>
                <bk-table-column label="订单号" prop="orderid" sortable></bk-table-column>
                <bk-table-column label="客户名" prop="customername"
                    :filters="sourceFilters"
                    :filter-method="sourceFilterMethod"
                    :filter-multiple="false">
                </bk-table-column>
                <bk-table-column label="客户地址" prop="customeraddress"
                    :filters="sourceFilters"
                    :filter-method="sourceFilterMethod"
                    :filter-multiple="false">
                </bk-table-column>
                <bk-table-column label="价格" prop="total"></bk-table-column>
                <bk-table-column label="状态" prop="status"
                    :filters="statusFilters"
                    :filter-method="statusFilterMethod"
                    :filter-multiple="false">
                </bk-table-column>
                <bk-table-column label="创建时间" prop="createtime"></bk-table-column>
                <bk-table-column label="操作" width="150">
                    <template slot-scope="props">
                        <bk-button class="mr10" theme="primary" text :disabled="props.row.status === '订单完成'" @click="updateorder(props.row)">下一步</bk-button>
                        <bk-button @click="lookinfo(props.row)" class="mr10" theme="primary" text>详情</bk-button>
                    </template>
                </bk-table-column>
            </bk-table>
            <div style="margin:10px 20px 10px 20px">
                <bk-button theme="primary" size="big" :loading="processing" @click="batchupdate" class="mr10">批量处理</bk-button>
                <span v-bk-tooltips.top="'批量处理只能批量处理状态相同的订单'">
                    <i class="bk-icon icon-info-circle-shape"></i>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        inject: ['reload'],
        components: {
        },
        data () {
            const user = sessionStorage.getItem('user')
            // console.log(user)
            if (user) {
                const username = JSON.parse(user)
                this.username = username
            }
            this.getunderway(1)
            return {
                processing: false,
                username: '',
                mername: '',
                total: 0,
                digits: 1,
                data: [
                ],
                pagination: {
                    current: 1,
                    count: 0,
                    limit: 10
                },
                statusFilters: [
                    {
                        text: '下单成功',
                        value: '下单成功'
                    },
                    {
                        text: '等待商家上门取衣',
                        value: '等待商家上门取衣'
                    },
                    {
                        text: '等待洗衣',
                        value: '等待洗衣'
                    },
                    {
                        text: '洗衣完成',
                        value: '洗衣完成'
                    },
                    {
                        text: '商家送衣',
                        value: '商家送衣'
                    }
                ],
                Selection: [
                ]
            }
        },
        created () {
        },
        methods: {
            /**
             * 获取页面数据
             *
             * @return {Promise} promise 对象
             */

            fetchPageData () {
                // 串行写法
                // await this.$store.dispatch(`example/enterExample1`, {time: +new Date()})
                // await this.$store.dispatch(`example/enterExample2`, {time: +new Date()})
                // 并行写法
            },
            clearFilter () {
                this.$refs.table.clearFilter()
            },
            handleSelectionChange (val) {
                this.Selections = val
                console.log(this.Selections)
            },
            handlePageChange (page) {
                this.pagination.current = page
                this.getunderway(page)
            },
            getunderway (page) {
                const qs = require('qs')
                this.axios({
                    url: '/getunderway/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        username: JSON.parse(sessionStorage.getItem('user')),
                        page: page
                    })
                }).then(res => {
                    this.data = []
                    for (const i in res.data.result_data) {
                        const tmp = {
                            orderid: 0,
                            customername: '',
                            customeraddress: '',
                            total: 0,
                            status: '',
                            createtime: ''
                        }
                        tmp.orderid = res.data.result_data[i].id
                        tmp.customername = res.data.result_data[i].customer_realname
                        tmp.customeraddress = res.data.result_data[i].customer_address
                        tmp.total = res.data.result_data[i].total
                        tmp.status = res.data.result_data[i].status
                        tmp.createtime = res.data.result_data[i].updatetime
                        this.$set(this.data, i, tmp)
                    }
                    this.pagination.count = res.data.pagenum
                })
            },
            updateorder (row) {
                const qs = require('qs')
                this.axios({
                    url: '/updateorder/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        username: JSON.parse(sessionStorage.getItem('user')),
                        orderid: row.orderid
                    })
                }).then(res => {
                    const h = this.$createElement
                    this.$bkInfo({
                        type: 'success',
                        title: '处理成功!',
                        showFooter: false,
                        subHeader: h('a', {
                            style: {
                                color: '#3a84ff',
                                textDecoration: 'none',
                                cursor: 'pointer'
                            }
                        })
                    })
                    this.getunderway(this.pagination.current)
                })
            },
            batchupdate () {
                if (this.Selections) {
                    // 判断是否所选状态是否相同
                    const index = {
                        flag: 0
                    }
                    const origin = this.Selections[0].status
                    for (const i in this.Selections) {
                        if (origin !== this.Selections[i].status) {
                            index.flag = 1
                            break
                        }
                    }
                    // 若相同进行批量更新
                    if (index.flag === 0) {
                        for (const i in this.Selections) {
                            const qs = require('qs')
                            this.axios({
                                url: '/updateorder/',
                                method: 'post',
                                responseType: 'json',
                                data: qs.stringify({
                                    username: JSON.parse(sessionStorage.getItem('user')),
                                    orderid: this.Selections[i].orderid
                                })
                            }).then(res => {
                            })
                        }
                        const h = this.$createElement
                        this.$bkInfo({
                            type: 'success',
                            title: '处理成功',
                            showFooter: false,
                            subHeader: h('a', {
                                style: {
                                    color: '#3a84ff',
                                    textDecoration: 'none',
                                    cursor: 'pointer'
                                }
                            })
                        })
                        this.getunderway(1)
                        this.pagination.current = 1
                        this.Selections = []
                        this.reload()
                    } else {
                        const a = this.$bkInfo({
                            type: 'error',
                            title: '所选项目状态不相同',
                            subTitle: '此窗口2秒后关闭',
                            showFooter: false
                        })
                        let num = 2
                        const t = setInterval(() => {
                            a.subTitle = `此窗口${--num}秒后关闭`
                            if (num === 0) {
                                clearInterval(t)
                                a.close()
                            }
                        }, 1000)
                    }
                } else {
                    this.$bkInfo({
                        title: '请先批量选择'
                    })
                }
            },
            statusFilterMethod (value, row, column) {
                const property = column.property
                return row[property] === value
            },
            lookinfo (row) {
                this.$router.push({
                    name: 'meorderinfo',
                    query: {
                        id: row.orderid
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .bk-table-header .custom-header-cell {
        color: inherit;
        text-decoration: underline;
        text-decoration-style: dashed;
        text-underline-position: under;
    }
</style>
